<template>
  <div class="currency-box">
    <div class="left">
      <header>
        <div class="search">
          <a-input
            placeholder="输入名称,回车搜索"
            v-model="searchInfo.keyWords"
            @keyup.enter="upproductList"
          />
        </div>
        <div class="icon">
          <a-icon
            type="plus"
            style="margin-right: 0.625rem"
            class="icon-class"
            @click="addApprovalFun"
          />
        </div>
      </header>
      <section>
        <div
          :class="['section-box', index == listIdx ? 'section-active' : '']"
          v-for="(item, index) in list"
          :key="index"
        >
          <span class="section-box-info">{{ item.ApprovalProcessName }}</span>
        </div>
      </section>
    </div>
    <div class="right right-header">
      <header>
        <div class="info-left">
          <span>{{ examineInfo.ApprovalProcessName || "暂无" }}</span>
          <a-tag
            v-show="examineInfo.ApprovalProcessName"
            :color="
              examineInfo.ApprovalProcessStatus == 0 ? '#DC143C' : '#16a951'
            "
            >{{
              examineInfo.ApprovalProcessStatus == 0 ? "禁用" : "启用"
            }}</a-tag
          >
        </div>
        <div class="info-right">
          <general-button
            @operation="editApprovalFun()"
            btnText="编辑"
            :btnDisabled="!examineInfo.ApprovalProcessName ? true : false"
          ></general-button>
          <general-button
            @operation="delApprovalFun()"
            btnText="删除"
            :btnDisabled="!examineInfo.ApprovalProcessName ? true : false"
          ></general-button>
        </div>
      </header>
      <section>
        <approve-box
          @addExamineFun="addExamineFun"
          :list="levelList"
        ></approve-box>
      </section>
    </div>
    <examine-modal
      :show.sync="examineShow"
      :isEdit="examineEdit"
      :info="modalInfo"
      @upDataList="upData"
    ></examine-modal>
    <examine-detail
      :show.sync="detailShow"
      :item="examineInfo"
      :list="list"
      :idx="approveNum"
      @updataList="detailUp"
    ></examine-detail>
  </div>
</template>

<script>
import GeneralButton from "@/components/be-current-btn.vue"; //按钮
import ExamineModal from "./children/examineModal.vue"; //新增编辑审批流
import ApproveBox from "@/components/approve-list.vue"; //审批流载体
import ExamineDetail from "./children/examineDetail.vue"; //审批流明细
import {
  getApprovalProcessList,
  delApprovalProcess,
  getApprovalLevelList,
  getApprovalProcessRelationList,
} from "@/api/JobRecordApproval";
export default {
  name: "Examine",
  components: {
    GeneralButton,
    ExamineModal,
    ApproveBox,
    ExamineDetail,
  },
  data() {
    return {
      searchInfo: {
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
        keyWords: null,
      }, //搜索
      list: [], //展示列表
      listIdx: 0, //当前选中项
      listNum: 0, //当前列表条数
      examineShow: false, //添加审批流
      examineEdit: false, //是否添加
      examineInfo: {
        ApprovalProcessName: null, //审批流名称
        ApprovalProcessDesc: null, //审批流描述
      },
      modalInfo: {
        ApprovalProcessName: null, //审批流名称
        ApprovalProcessDesc: null, //审批流描述
      },
      detailShow: false, //明细展示
      levelList: [], //明细列表
      approveNum: 0, //当前选择的idx
    };
  },
  methods: {
    /* 查询列表 */
    async getApprovalFun() {
      let res = await getApprovalProcessList(this.searchInfo);
      this.list = this.list.concat(res.Data.Data);
      if (this.list.length > 0) {
        this.examineInfo = this.list[0];
      }
      this.TotalNumber = res.Data.TotalNumber;
      this.getApprovalLevel();
    },
    /* 新增审批流 */
    addApprovalFun() {
      this.modalInfo = {
        ApprovalProcessName: null, //审批流名称
        ApprovalProcessDesc: null, //审批流描述
      };
      this.examineEdit = false;
      this.examineShow = true;
    },
    /* 修改审批流 */
    editApprovalFun() {
      this.modalInfo = JSON.parse(JSON.stringify(this.examineInfo));
      this.examineEdit = true;
      this.examineShow = true;
    },

    /* 删除审批流 */
    delApprovalFun() {
      let _this = this;
      this.$confirm({
        title: `删除【${this.examineInfo.approvalProcessName}】`,
        content: "",
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          const res = await delApprovalProcess([this.examineInfo]);
          _this.$message.info("删除成功");
          _this.getApprovalFun();
        },
        onCancel() {},
      });
    },

    /* 新增审批流明细 */
    addExamineFun(idx) {
      this.approveNum = idx;
      this.detailShow = true;
    },
    /* 查询审批流列表 */
    async getApprovalLevel() {
      let { ApprovalProcessID } = this.examineInfo;
      let res = await getApprovalLevelList({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 100,
        },
        approvalProcessID: ApprovalProcessID,
      });
      this.levelList = res.Data.Data;
      this.levelList.map((item, index) => {
        this.getapprovalprocessrelationList(item.ApprovalLevelID);
      });
    },
    /* 查询审批流明细层级 */
    async getapprovalprocessrelationList(ApprovalLevelID) {
      let res = await getapprovalprocessrelationList({
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 100,
        },
        approvalLevelID: ApprovalLevelID,
      });
      if (res.body[0]) {
        this.levelList.map((item, index) => {
          if (item.approvalLevelID == res.body[0].approvalLevelID) {
            item.RelationList = res.body;
          }
        });
      }
    },
    /* 更新明细列表 */
    detailUp() {
      this.getApprovalLevel();
    },
    /* 更新列表 */
    upData() {
      this.list = [];
      this.searchInfo = {
        ...this.searchInfo,
        pageRequestModel: {
          pageIndex: 1,
          pageSize: 30,
        },
      };
      this.getApprovalFun();
    },
  },
  mounted() {
    this.getApprovalFun();
  },
};
</script>

<style lang="less" scoped>
.right-header {
  display: flex;
  flex-direction: column;
  header {
    margin-bottom: 0.625rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid #f0f2f5;
    .info-left {
      flex: 1;
      .ant-tag {
        margin-left: 0.625rem;
      }
    }
    .info-right {
      .ant-btn:nth-child(1) {
        margin-right: 1.25rem;
      }
    }
  }
  section {
    flex: 1;
    overflow: auto;
  }
}
</style>
